<template>
	<view class="container">
		<u-toast ref="tip"></u-toast>
		<!-- 弹出层 -->
		<u-popup :show="isShowAccountBook" :round="roundNum" mode="top" @close="changeFlag('isShowAccountBook', false)" @open="changeFlag('isShowAccountBook', true)">
			<scroll :accountBookList="accountBookList" @editAccountBook="editAccountBook" @selectAccountBook="selectAccountBook" @addAccountBook="addAccountBook"></scroll>
		</u-popup>
		<u-popup :show="isShowEditDialog" :round="roundNum" mode="bottom" @close="closeEditDialog" @open="changeFlag('isShowEditDialog', true)">
			<detail ref="detail" @closeEditDialog="closeEditDialog" :accountBook="accountBook" :titleText="titleText" 
				:type="accountBookDetailType" @accountBookConfirm="accountBookConfirm" @categoryDetailConfirm="categoryDetailConfirm" @deleteCategory="deleteCategory2"
				@deleteAccountBook="deleteAccountBook"></detail>
		</u-popup>
		<!-- 上面两个下拉框 -->
		<view class="top-container">
			<tip :isYellow="true" :nameWidth="accountNameWidth" :message="tipMessage" @showSelectTimeFunction="changeFlag('isShowAccountBook', true)"/>
			<tip class="show-time" :nameWidth="timeWidth" :isYellow="false" :message="timeMessage" @showSelectTimeFunction="changeFlag('showSelectTime', !showSelectTime)" />
		</view>
		<!-- 支出提示 -->
		<pay @showPopup="showPopup('showPayCard')" :message="message" :payMoney="payMoney" class="pay-components"></pay>
		<card v-if="showPayCard" @deleteCategory="deleteCategory" :column="payCategoryList" :showDelete="showDelete" @exidCard="exidCard" :animateFlag="animateFlag" @editCategory="editCategoryCallback"></card>
		<!-- <card  v-if="showPayCard" :class="['card', {'animate__animated': animateFlag}, {'animate__shakeX': animateFlag}]" :column="payColumn" :showDelete="showDelete" @exidCard="exidCard"></card> -->
		<pay @showPopup="showPopup('showIncomeCard')" message="收入" :payMoney="incomeMoney" class="pay-components"></pay>
		<card v-if="showIncomeCard" @deleteCategory="deleteCategory" :column="incomeCategoryList" :showDelete="showDelete" @exidCard="exidCard"  :animateFlag="animateFlag"  @editCategory="editCategoryCallback"></card>
		<!-- <card  v-if="showIncomeCard" :class="['card', {'animate__animated': animateFlag}, {'animate__shakeX': animateFlag}]" :column="payColumn" :showDelete="showDelete" @exidCard="exidCard"></card> -->
		<view class="select-time"  v-if="showSelectTime">
			<view :class="['select-time-item', {'select-time-select' : item.isSelect}]"
				v-for="(item, index) in selectTimeList" :key="index" @click="selectTime(index)">
				{{item.time}}
			</view>
		</view>
		<!-- 引入阿里图标，浏览器可以，移动端不行的时候，在生成的css文件中的url前面加上 https 就可以了 -->
		<view class="add-category" v-if="isShowAddBtn">
			<view class="iconfont icon-jiajianzujianjiahao" @click="changeFlag('isShowCategoryDetail', true)"></view>
		</view>
		<!-- 分类明细组件弹框 -->
		<u-popup :show='isShowCategoryDetail' :round="20" mode="bottom" @close="changeFlag('isShowCategoryDetail', false)" @open="changeFlag('isShowCategoryDetail', true)">
			<category-detail @closeCategoryDetail="changeFlag('isShowCategoryDetail', false)" :categoryDetail="categoryDetail" @categoryDetailConfirm="categoryDetailConfirm"></category-detail>
		</u-popup>
		<!-- <u-button @click="clear">清除缓存</u-button> -->
	</view>
</template>

<script>
	import card from './components/card/card';
	import tip from '@/components/tip/tip';
	import pay from './components/pay/pay';
	import scroll from './components/scroll/scroll';
	import detail from '@/components/detail/detail';
	import { removeToken, removeUuid } from '@/util/auth.js';
	import {checkStrType2} from '../../util/regular/regular.js';
	export default {
		components: {
			card,
			tip,
			pay, scroll, detail,
		},
		data() {
			return {
				accountNameWidth: 0,																				// 上面的账本名字背景盒子长度
				timeWidth: 0,																						// 时间选择长度
				categoryDetail: {},																					// 新增分类弹框
				accountBook: {},																					// 修改时的账本对象
				titleText: '新增',																					// 账本明细标题
				accountBookDetailType: 'insert',																	// 账本弹框类型 (insert: 不显示分类， udpate: 显示)
				payCategoryList: [],																				// 支出分类集合
				incomeCategoryList: [],																				// 收入分类集合
				accountBookIndex: 0,																				// 账本索引
				isShowCategoryDetail: false,																		// 展示图标选择组件
				accountBookList: [],																				// 账本集合数据
				isShowAddBtn: false,
				roundNum: 20,
				isShowAccountBook: false,																			// 上方弹框，账本
				isShowEditDialog: false,																			// 下方弹框，账本编辑框
				tipMessage: "",
				timeMessage: "时间 ",
				accountName: "牛逼",
				animateFlag: false,

				// 支出金钱
				message: '支出',
				payMoney: 0,																						// 支出总数
				incomeMoney: 0,																						// 收入总数

				// 弹框的添加账本的提示信息
				addName: '添加账本',

				// 是否显示支出卡片
				showPayCard: true,
				showIncomeCard: true,

				// 支出卡片
				payColumn: [],
				// 是否显示删除图标
				showDelete: false,

				// 显示选择的时间
				showSelectTime: false,
				selectTimeList: [{
					id: 1,
					time: '本周',
					isSelect: true
				}, {
					id: 2,
					time: '本月',
					isSelect: false
				}, {
					id: 3,
					time: '本年',
					isSelect: false
				}, {
					id: 4,
					time: '所有',
					isSelect: false
				}],
				options: [
					{
						text: '收藏',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				shakeArr: ['delay1', 'delay2', 'delay3', 'delay4'],												// 不同延长时间的动画样式
			}
		},
		onLoad() {
			this.init();
		},
		methods: {
			/** 删除账本回调
			 * @param {Object} accountBook 账本对象
			 */
			deleteAccountBook(accountBook) {
				var that = this;
				this.confirm('警告', '确定删除吗', () => {
					that.$req.deleteAccountBook(accountBook.id).then(res => {
						if (res.code != 40000) {
							that.msg(res.message);
							return;
						}	
						that.msg("删除成功");
						setTimeout(() => {
							that.changeAllFalse();
							that.init();
						}, 1000)
					})
				})
			},
			/** 删除回调
			 * @param {Object} category 分类对象
			 */
			deleteCategory2(category) {
				var that = this;
				var result = that.isShowEditDialog;
				that.confirm('警告', '确定删除吗?', () => {
					that.$req.deleteCategory(category.id).then(res => {
						if (res.code != 60000) {
							that.msg(res.message);
							return;
						}
						that.msg("删除成功");
						that.init(() => {
							// 刷新detail组件，数据发生变化了
							// that.$refs.detail.$forceUpdate();
							// that.$refs.detail.refreshComponents();
							that.changeFlag('isShowEditDialog', result);
						});
					});
				});
			},
			/** 删除回调
			 * @param {Object} item 分类对象
			 * @param {Object} index 索引
			 */
			deleteCategory(item, index) {
				var that = this;
				this.confirm('警告', '确定删除吗', () => {
					that.$req.deleteCategory(item.id).then(res => {
						if (res.code != 60000) {
							that.msg(res.message);
							return;
						}
						that.msg("删除成功");
						setTimeout(() => {
							that.changeAllFalse();
							that.init();
						}, 1000)
					})
				})
			},
			/**
			 * 将编辑弹框、账本弹框、晃动动画、删除、显示删除都关闭
			 */
			changeAllFalse() {
				this.changeFlag("isShowEditDialog", false);
				this.changeFlag("isShowAccountBook", false);
				this.changeFlag('animateFlag', false);
				this.changeFlag('showDelete', false);
				this.changeFlag('isShowAddBtn', false);
			},
			/**  确定回调，新增或者修改
			 * @param {Object} accountBook 对象信息
			 */
			categoryDetailConfirm(categoryDetail) {
				if (!categoryDetail.type) {
					categoryDetail.type = 'pay';
				} else if (categoryDetail.type == 'income') {
					categoryDetail.budget = '';
				}
				categoryDetail.accountBookId = this.accountBookList[this.accountBookIndex].id;
				categoryDetail.accountBookName = this.accountBookList[this.accountBookIndex].name;
				console.log(categoryDetail, "categoryDetail123");
				var that = this;
				that.$req[categoryDetail.id ? 'updateCategory' : 'insertCategory'](categoryDetail).then(res => {
						that.categoryDetailCallback(res);
				});
			},
			/** 新增或者修改分类后操作
			 * @param {Object} res 结果
			 */
			categoryDetailCallback(res) {
				if (res.code != 30000 && res.code != 40000) {
					this.msg(res.message);
					return;
				}
				this.msg(res.message);
				setTimeout(() => {
					this.changeFlag("isShowAccountBook", false);
					this.changeFlag("isShowCategoryDetail", false);
					this.init(() => {
						this.changeFlag("isShowEditDialog", true);
						this.$refs.detail.changeFlag('isShowCategoryDetail', false);
						this.$refs.detail.updateComponents();
					});
				}, 2000)
			},
			/**  确定回调，新增或者修改
			 * @param {Object} accountBook 对象信息
			 */
			accountBookConfirm(accountBook) {
				console.log(accountBook, "book");
				// this.successTips(this.$refs.tip, "测试", null);
				// this.errorTips(this.$refs.tip, "暂无数据", null);
				var that = this;
				// that.$refs.tip.show({message: '测试', icon: 'https://cdn.uviewui.com/uview/demo/toast/success.png', type: 'success'});
				that.$req[accountBook.id ? 'updateAccountBook' : 'insertAccountBook'](accountBook).then(res => {
						if (!res.success) {
							that.msg(res.message);
							return;
						}
						that.msg(!accountBook.id ? "新增成功" : "修改成功");
						setTimeout(() => {
							that.changeAllFalse();
							that.init();
						}, 2000)
				});
			},
			init(callback, firstCallback) {
				var that = this;
				// var tipObj = that.$refs.tip;
				// debugger
				that.$req.getAccountBookList().then(res => {
					// that.successTips("")
					// console.log(res, "res结果");
					// debugger
					if (res.other == 0) {
						this.msg("暂无数据") 
						// that.errorTips(tipObj, "暂无数据", null);
					} else {
						if (firstCallback) {
							firstCallback();
						}
						that.changeAllFalse();
						that.accountBookList = res.data;
						that.accountBookIndex = that.accountBookIndex ?? 0;
						that.accountBook = that.accountBookList[that.accountBookIndex ?? 0];
						that.incomeCategoryList = that.accountBookList[that.accountBookIndex].incomeCategoryList;
						that.payCategoryList = that.accountBookList[that.accountBookIndex].payCategoryList;
						that.payMoney = that.accountBookList[that.accountBookIndex].payMoneys;
						that.incomeMoney = that.accountBookList[that.accountBookIndex].incomeMoneys;
						that.tipMessage = that.accountBookList[that.accountBookIndex].name;
						that.accountNameWidth = that.accountBookList[that.accountBookIndex].width;
						that.timeWidth = checkStrType2(that.timeMessage, 55, 35);
						if (callback) {
							callback();
						}
					}
				})
			},
			/** 选中事件
			 * @param {Object} obj (item, index)
			 */
			selectAccountBook(obj) {
				this.accountBookIndex = obj.index;
				this.accountBookList.forEach((item, index) => item.selected = index == obj.index);
				this.incomeCategoryList = this.accountBookList[this.accountBookIndex].incomeCategoryList;
				this.payCategoryList = this.accountBookList[this.accountBookIndex].payCategoryList;
				this.tipMessage = this.accountBookList[this.accountBookIndex].name;
				this.accountNameWidth = this.accountBookList[this.accountBookIndex].width;
				this.payMoney = this.accountBookList[this.accountBookIndex].payMoneys;
				this.incomeMoney = this.accountBookList[this.accountBookIndex].incomeMoneys;
				this.changeFlag('isShowAccountBook', false);
			},
			/** 编辑分类回调
			 * @param {Object} item 分类对象
			 */
			editCategoryCallback(item) {
				this.categoryDetail = item;
				this.changeFlag('isShowCategoryDetail', true);
			},
			/** 切换状态
			 * @param {Object} name 名字
			 * @param {Object} flag 状态
			 */
			changeFlag(name, flag) {
				this[name] = flag;
			},
			/** 点击账本修改回调
			 * @param {Object} item 账本对象
			 */
			editAccountBook(item, index) {
				this.titleText = "编辑账本";
				this.accountBookDetailType = "update";
				this.accountBook = this.accountBookList[index];
				this.changeFlag('isShowAccountBook', false);
				this.changeFlag('isShowEditDialog', true);
			},
			/** 点击账本新增回调
			 * @param {Object} item 账本对象
			 */
			addAccountBook() {
				this.titleText = "新增账本";
				this.accountBookDetailType = "insert";
				this.accountBook = {};
				this.changeFlag('isShowAccountBook', false);
				this.changeFlag('isShowEditDialog', true);
			},
			/**
			 * 关闭弹框
			 */
			closeEditDialog() {
				console.log("关闭回调");
				this.isShowEditDialog = false;
				this.isShowAccountBook = true;
			},
			// 支出的向下箭头函数
			showPopup(name) {
				this[name] = !this[name];
			},
			// 长按卡片子组件触发的方法
			exidCard() {
				this.animateFlag = !this.animateFlag;
				this.showDelete = !this.showDelete;
				this.isShowAddBtn = !this.isShowAddBtn;
				this.payCategoryList.forEach(item => {
					if (this.animateFlag) {
						var num2 = Math.ceil(Math.random() * 4) - 1;
						item.shake = this.shakeArr[num2];
					} else {
						item.shake = "";
					}
				})
				this.incomeCategoryList.forEach(item => {
					if (this.animateFlag) {
						var num2 = Math.ceil(Math.random() * 4) - 1;
						item.shake = this.shakeArr[num2];
					} else {
						item.shake = "";
					}
				})
			},
			/**
			 *  子组件调用父组件，然后显示时间的函数
			 */
			showSelectTimeFunction() {
				this.showSelectTime = !this.showSelectTime;
			},
			// 选择时间函数
			selectTime(time) {
				// 遍历判断索引值，相同的则设置为true即可
				// this.selectTimeList.forEach((item, index) => item.isSelect = index == time ? true : false);
				// this.showSelectTime = false;
			},
		},
		onShow(){
		},
		mounted() {
		},
		onPullDownRefresh() {
			console.log("下拉刷新");
			this.init('', '');
			uni.stopPullDownRefresh();
		},
	}
</script>

<style lang="scss">
	

	
	.u-cell__body {
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
		padding: 20px 0px !important;
		font-size: 15px;
		color: #303133;
		align-items: center;
		position: relative;
	}
	
	.u-collapse-item__content__text {
		padding: 0rpx !important;
	}
	
	.card-up-title {
		margin-left: 50%;
	}
	
	
	
	/* 设置背景颜色 */
	
	page {
		background-color: #fefdf8;
		box-sizing: border-box;
		padding-top: var(--status-bar-height);
		min-height: calc(100vh - 250rpx);
		// 字体
		font-family: Simsun;
	}

	/* // 最大盒子 */
	.container {
		padding: 35rpx;
	}

	.popup-container {
		display: flex;
		background-color: $themeColor;
		padding-bottom: 20rpx;
	}

	/* // 弹出层 */
	.index-popup {
		background-color: $themeYellowColor;
		border: 4rpx solid #5e568c;
	}

	.account-name {
		text-align: center;
		font-size: 30rpx;
		font-weight: 500;
		color: white;
	}

	/* // 钱包图标 */
	.center-icon {
		margin-top: 10rpx;
		font-size: 120rpx;
		color: #d0d0d0;
		text-align: center;
		opacity: 0.3;
		margin-bottom: 20rpx;
	}

	/* // 下面工具栏 */
	.bottom-tool {
		color: white;
		display: flex;
		justify-content: space-between;
	}

	/* // 添加账本 */
	.account-add {
		background-color: white;
		color: #696969;
		text-align: center;
		border: 4rpx dashed #696969;
	}


	.add-name {
		font-size: 35rpx;
		font-weight: 700;
	}

	/* // 加号图标 */
	.jiahao-icon {
		font-size: 100rpx;
		line-height: 230rpx;
	}

	/* // 共同属性 */
	.same {
		width: 160rpx;
		height: 230rpx;
		margin-left: 30rpx;
		padding: 20rpx;
		margin-top: 100rpx;
		border-radius: 20rpx;
	}

	/* // 上面两个下拉框 */
	.top-container {
		display: flex;
		justify-content: space-between;
	}

	.bgc {
		position: absolute;
		// background-color: yellow;
		height: 60rpx;
		width: 150rpx;
		left: 20rpx;
		opacity: 0.2;
	}

	/* // 支出组件 */
	.pay-components {
		margin-top: 20rpx;
	}
	
	.show-time {
		position: relative;
	}
	
	/* // 显示选择的时间 */
	.select-time {
		position: absolute;
		background-color: white;
		top: 12%;
		right: 30rpx;
		width: 130rpx;
		// padding: 10rpx;
		font-size: 24rpx;
		border: 1rpx solid #a2a2a2;
		border-radius: 10rpx;
		color: #a2a2a2;
	}
	

	.select-time-item {
		width: 100%;
		text-align: center;
		height: 70rpx;
		line-height: 70rpx;
		border-bottom: 1rpx solid #ccc;
	}

	/* // 最后一个不要下边框 */
	.select-time-item:last-child {
		border-bottom: 0rpx;
	}

	.select-time-select {
		color: #4d4f91;
	}
	
	
	// 加号按钮
	.add-category {
		width: 100rpx;
		height: 100rpx;
		background-color: $themeYellowColor;
		border-radius: 50%;
		position: absolute;
		bottom: 10rpx;
		left: calc(50% - 50rpx);
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		
		// 加号图标
		.icon-add-category {
			font-size: 60rpx;
			color: white;
		}
	}
</style>
